<template>
  <div class="content-box">
    <div>
      <TreeFilter
        ref="chapterTreeFilter"
        title="章节列表(多选)"
        multiple
        label="name"
        :request-api="getChapterMenuApi"
        :api-params="course_id"
        @change="changeTreeFilter1"
        :show-all-tag="false"
        :expand-on-click-node="false"
        :default-expand-all="false"
      />
      <el-button
        v-auth="'edit'"
        type="primary"
        :icon="CirclePlus"
        @click="router.push('/chapter/index/' + course_id)"
        style="width: 100%"
      >
        管理章节
      </el-button>
    </div>
    <div class="descriptions-box card">
      <span class="text"> {{ course_info?.title || course_info?.name }} </span>
      <span class="break-word"> {{ course_info?.introduce }} </span>
      <SelectFilter :data="type_filter_data" :default-values="filterResult" @change="changeFilter" />
      <div>
        <el-button type="primary" :icon="View" @click="batchBrowse"> 批量浏览试题 </el-button>
      </div>
      <p v-if="filterResult.state == 'study' || filterResult.state == ''">
        <el-descriptions title="重要知识点记忆" :column="1" border />
        <ProTable
          ref="bankStudyProtable"
          title="检查列表"
          :columns="columns"
          :pagination="false"
          :request-api="getBankListApi"
          :init-param="bank_study_request_params"
          row-key="bank_id"
        >
          <template #tableHeader="">
            <el-button
              v-auth="'add'"
              type="primary"
              :icon="CirclePlus"
              @click="handleAddBankDrawer('新增', 'study', bankStudyProtable?.getTableList, bank_study_request_params)"
            >
              新增题库
            </el-button>
          </template>
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="Edit" @click="handleExercise(scope.row)"> 练习 </el-button>
            <el-button type="primary" link :icon="EditPen" @click="handleBrowseBank(scope.row)"> 浏览题库 </el-button>
            <el-button
              v-auth="'edit'"
              type="primary"
              link
              :icon="View"
              @click="handleEditBankDrawer('编辑', scope.row, bankStudyProtable?.getTableList, bank_simu_request_params)"
            >
              编辑信息
            </el-button>
            <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="handleEditBankQuestion(scope.row)">
              编辑试题
            </el-button>
            <el-button
              v-auth="'delete'"
              type="primary"
              link
              :icon="Delete"
              @click="delBank(scope.row, bankStudyProtable?.getTableList, bank_study_request_params)"
            >
              删除
            </el-button>
          </template>
        </ProTable>
        <EditBankInfoDrawer ref="editBankInfoDrawerRef" />
      </p>
      <p v-if="filterResult.state == 'real' || filterResult.state == ''">
        <el-descriptions title="真题题库" :column="1" border />
        <ProTable
          ref="bankRealProtable"
          title="检查列表"
          :columns="columns"
          :pagination="false"
          :request-api="getBankListApi"
          :init-param="bank_real_request_params"
          row-key="bank_id"
        >
          <template #tableHeader="">
            <el-button
              v-auth="'add'"
              type="primary"
              :icon="CirclePlus"
              @click="handleAddBankDrawer('新增', 'real', bankRealProtable?.getTableList, bank_real_request_params)"
            >
              新增题库
            </el-button>
          </template>
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="Edit" @click="handleExercise(scope.row)"> 练习 </el-button>
            <el-button type="primary" link :icon="EditPen" @click="handleBrowseBank(scope.row)"> 浏览题库 </el-button>
            <el-button
              v-auth="'edit'"
              type="primary"
              link
              :icon="View"
              @click="handleEditBankDrawer('编辑', scope.row, bankRealProtable?.getTableList, bank_simu_request_params)"
            >
              编辑信息
            </el-button>
            <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="handleEditBankQuestion(scope.row)">
              编辑试题
            </el-button>
            <el-button
              v-auth="'delete'"
              type="primary"
              link
              :icon="Delete"
              @click="delBank(scope.row, bankRealProtable?.getTableList, bank_real_request_params)"
            >
              删除
            </el-button>
          </template>
        </ProTable>
        <EditBankInfoDrawer ref="editBankInfoDrawerRef" />
      </p>
      <p v-if="filterResult.state == 'simu' || filterResult.state == ''">
        <el-descriptions title="模拟题题库" :column="1" border />
        <ProTable
          ref="bankSimuProtable"
          title="检查列表"
          :columns="columns"
          :pagination="false"
          :request-api="getBankListApi"
          :init-param="bank_simu_request_params"
          row-key="bank_id"
        >
          <template #tableHeader="">
            <el-button
              v-auth="'add'"
              type="primary"
              :icon="CirclePlus"
              @click="handleAddBankDrawer('新增', 'simu', bankSimuProtable?.getTableList, bank_simu_request_params)"
            >
              新增题库
            </el-button>
          </template>
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="Edit" @click="handleExercise(scope.row)"> 练习 </el-button>
            <el-button type="primary" link :icon="EditPen" @click="handleBrowseBank(scope.row)"> 浏览题库 </el-button>
            <el-button
              type="primary"
              link
              :icon="View"
              @click="handleEditBankDrawer('编辑', scope.row, bankSimuProtable?.getTableList, bank_simu_request_params)"
            >
              编辑信息
            </el-button>
            <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="handleEditBankQuestion(scope.row)">
              编辑试题
            </el-button>
            <el-button
              type="primary"
              v-auth="'delete'"
              link
              :icon="Delete"
              @click="delBank(scope.row, bankSimuProtable?.getTableList, bank_simu_request_params)"
            >
              删除
            </el-button>
          </template>
        </ProTable>
        <EditBankInfoDrawer ref="editBankInfoDrawerRef" />
      </p>
      <p v-if="filterResult.state == 'my' || filterResult.state == ''">
        <el-descriptions title="我的题库" :column="1" border />
        <ProTable
          ref="bankMyProtable"
          title="检查列表"
          :columns="columns"
          :pagination="false"
          :request-api="getBankListApi"
          :init-param="bank_my_request_params"
          row-key="bank_id"
        >
          <template #tableHeader="">
            <el-button
              type="primary"
              :icon="CirclePlus"
              @click="handleAddBankDrawer('新增', 'my', bankMyProtable?.getTableList, bank_my_request_params)"
            >
              新增题库
            </el-button>
          </template>
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="Edit" @click="handleExercise(scope.row)"> 练习 </el-button>
            <el-button type="primary" link :icon="EditPen" @click="handleBrowseBank(scope.row)"> 浏览题库 </el-button>
            <el-button
              type="primary"
              link
              :icon="View"
              @click="handleEditBankDrawer('编辑', scope.row, bankMyProtable?.getTableList, bank_my_request_params)"
            >
              编辑信息
            </el-button>
            <el-button type="primary" link :icon="EditPen" @click="handleEditBankQuestion(scope.row)"> 编辑试题 </el-button>
            <el-button
              type="primary"
              link
              :icon="Delete"
              @click="delBank(scope.row, bankMyProtable?.getTableList, bank_my_request_params)"
            >
              删除
            </el-button>
          </template>
        </ProTable>
        <EditBankInfoDrawer ref="editBankInfoDrawerRef" />
      </p>
    </div>
  </div>
</template>

<script setup lang="ts" name="course">
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { Bank } from "@/api/interface";
import { useRouter } from "vue-router";
import { onBeforeMount, ref } from "vue";
import { ElMessage, ElTree } from "element-plus";
import { getCourseInfoApi, getChapterMenuApi } from "@/api/modules/course";
import { addBankApi, delBankApi, getBankListApi, updateBankApi } from "@/api/modules/bank";
import TreeFilter from "@/components/TreeFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { CirclePlus, Delete, Edit, EditPen, View } from "@element-plus/icons-vue";
import EditBankInfoDrawer from "@/views/bank/editBankInfoDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import SelectFilter from "@/components/SelectFilter/index.vue";

const chapterTreeFilter = ref<InstanceType<typeof TreeFilter>>();
const columns: ColumnProps<any>[] = [
  { type: "selection", fixed: "left" },
  { prop: "name", label: "名字" },
  { prop: "chapter_name", label: "章节" },
  { prop: "provider", label: "提供者" },
  { prop: "operation", label: "操作", fixed: "right", width: 330 }
];
const router = useRouter();
const paths = router.currentRoute.value.path.split("/");
const course_id = ref<string>(paths[paths.length - 1]);
const course_info = ref<{ [key: string]: any }>();

const bankStudyProtable = ref<ProTableInstance>();
const bankRealProtable = ref<ProTableInstance>();
const bankSimuProtable = ref<ProTableInstance>();
const bankMyProtable = ref<ProTableInstance>();
let bank_study_request_params = ref<any>({
  course_id: course_id,
  chapter_ids: [],
  type: "study",
  test: "ProTable"
});

let bank_real_request_params = ref<any>({
  course_id: course_id,
  chapter_ids: [],
  type: "real",
  test: "ProTable"
});

let bank_simu_request_params = ref<any>({
  course_id: course_id,
  chapter_ids: [],
  type: "simu",
  test: "ProTable"
});

let bank_my_request_params = ref<any>({
  course_id: course_id,
  chapter_ids: [],
  type: "my",
  test: "ProTable"
});

let select_bank_ids = [];
const editBankInfoDrawerRef = ref<InstanceType<typeof EditBankInfoDrawer> | null>(null);
const filterResult = ref({ state: "study" });
const init = async function () {
  course_id.value = paths[paths.length - 1];
  let course_data = await getCourseInfoApi(course_id.value);
  course_info.value = course_data.data;
};

const delBank = async (row: Bank.BankInfo, getTableList: any, request_params: any) => {
  await useHandleData(delBankApi, row, `删除试题`);
  await getTableList(request_params);
};

const changeTreeFilter1 = async (chapter_ids: string[]) => {
  bank_study_request_params.value.chapter_ids = chapter_ids;
  bank_simu_request_params.value.chapter_ids = chapter_ids;
  bank_real_request_params.value.chapter_ids = chapter_ids;
  bank_my_request_params.value.chapter_ids = chapter_ids;
  ElMessage.success(`你选择了 id 为 ${JSON.stringify(chapter_ids)} 的数据🤔`);
  chapter_ids = chapter_ids.filter(function (element) {
    return element != "";
  });
  if (chapter_ids.length == 0) {
    return await init();
  }
  // await getBankList(chapter_ids);
};

onBeforeMount(() => {
  init();
});

const handleEditBankQuestion = (bank: any) => {
  router.push(
    "/bank/editBankQuestion/" +
      encodeURI(
        JSON.stringify({
          course_id: course_id.value,
          bank_id: bank.bank_id
        })
      )
  );
};

const handleBrowseBank = (bank: any) => {
  router.push(
    "/question/browse/" +
      encodeURI(
        JSON.stringify({
          bank_ids: [bank.bank_id],
          course_id: course_id.value
        })
      )
  );
};

const handleExercise = (bank: any) => {
  router.push("/exercise/index/bank_id=" + bank.bank_id);
};
const handleAddBankDrawer = (title: string, type: string, getTableList: any, getTableListParam: any) => {
  const params = {
    title,
    isView: title === "新增",
    row: {},
    api: addBankApi,
    getTableList: getTableList,
    getTableListParam: getTableListParam,
    chapter_id: null,
    course_id: course_id,
    // chapterOptions: chapterMenu,
    type: type
  };
  editBankInfoDrawerRef.value?.acceptParams(params);
};
const handleEditBankDrawer = (title: string, row: any, getTableList: any, getTableListParam: any) => {
  const params = {
    title,
    isView: title === "编辑",
    row: row,
    api: updateBankApi,
    getTableList: getTableList,
    getTableListParam: getTableListParam,
    chapter_id: row.chapter_id,
    course_id: course_id,
    // chapterOptions: chapterMenu,
    type: row.type
  };
  editBankInfoDrawerRef.value?.acceptParams(params);
};
const changeFilter = (val: typeof filterResult.value) => {
  filterResult.value = val;
};
const type_filter_data = [
  {
    title: "内容筛选",
    key: "state",
    options: [
      {
        label: "全部",
        value: ""
      },
      {
        label: "重要知识点记忆",
        value: "study"
      },
      {
        label: "真题题库",
        value: "real",
        icon: "ShoppingCart"
      },
      {
        label: "模拟题题库",
        value: "simu",
        icon: "Van"
      },
      {
        label: "我的题库",
        value: "my",
        icon: "Van"
      }
    ]
  }
];

const batchBrowse = async () => {
  select_bank_ids = [];
  select_bank_ids.push(...(bankStudyProtable.value?.selectedListIds || []));
  select_bank_ids.push(...(bankRealProtable.value?.selectedListIds || []));
  select_bank_ids.push(...(bankSimuProtable.value?.selectedListIds || []));
  select_bank_ids.push(...(bankMyProtable.value?.selectedListIds || []));
  select_bank_ids = Array.from(new Set(select_bank_ids));
  router.push(
    "/question/browse/" +
      encodeURI(
        JSON.stringify({
          bank_ids: select_bank_ids,
          course_id: course_id.value
        })
      )
  );
};
</script>

<style scoped lang="scss">
@import "index";
</style>
